<template>
    <!-- <pre>{{ column }}</pre>
    <br />
    <pre>{{ list }}</pre> -->
    <div class="column-detail-page w-75 mx-auto">
        <div class="column-info row mb-4 border-bottom pb-4 align-items-center">
            <div class="col-3 text-center">
                <img
                    class="rounded-circle border border-light my-3"
                    :alt="column.title"
                    :src="column.avatar && column.avatar.url"
                />
            </div>
            <div class="col-9 text-left">
                <h4>{{ column.title }}</h4>
                <p class="text-muted">{{ column.description }}</p>
            </div>
        </div>
    </div>
    <PostList :list="list" />
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import { useRoute } from "vue-router";
import { testData, testPosts } from "@/testData";
import PostList from "@/components/PostList.vue";
import { useStore } from "vuex";
import { GlobalDataProps } from "@/store";
export default defineComponent({
    components: {
        PostList,
    },
    setup() {
        const route = useRoute();
        const store = useStore<GlobalDataProps>();
        const currentId = route.params.id;
        store.dispatch("fetchColumn", currentId);
        store.dispatch("fetchPosts", currentId);
        const column = computed(() => store.getters.getColumnById(currentId));
        const list = computed(() => store.getters.getPostsByCid(currentId));
        return {
            column,
            list,
        };
    },
});
</script>

<style lang="scss" scoped>
.rounded-circle{
    width: 80px;
    height: 80px;
}
</style>
